<template>
  <div class="home-container">
    <!-- 顶部栏 -->
    <van-nav-bar fixed>
      <template #left>
        <!-- 用img做 -->
        <!-- <img src="@/assets/logo.png" alt="" width="100px" height="30px"> -->
        <!-- 用背景图 -->
        <div class="logo"></div>
      </template>

      <template #right>
        <van-button icon="search" type="info" round @click="$router.push('/search')">搜索</van-button>
      </template> </van-nav-bar
    >+

    <!-- tabs栏 -->
    <van-tabs v-model="active" color="#0098fa" @click="tabClick">
      <van-tab v-for="item in channelList" :title="item.name" :key="item.id">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
            @click="$router.push({path:'/article',query:{id:item.art_id}})"
              v-for="item in articlesList"
              :key="item.art_id"
              :title="item.title"
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item v-for="(v, i) in item.cover.images" :key="i">
                    <van-image :src="v" lazy-load/>
                  </van-grid-item>
                </van-grid>

                <br />
                <span>{{ item.aut_name }}</span
                >&nbsp;&nbsp; <span>{{ item.comm_count }}评论</span>&nbsp;&nbsp;
                <span>{{ item.pubdate | fromNow}}</span>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入接口
import { getChannels, getArticles } from './home.js'
// 导入格式化日期插件
import moment from "moment";

// 设置语言
moment.locale('zh-cn');  

export default {
  name: 'home',
  data () {
    return {
      active: 0,
      list: [], //列表内容
      loading: false, //控制动画显示及数据加载,上拉
      finished: false, //数据是否加载完成
      isLoading: false, // 下拉加载更多动画
      channelList: [],
      timestamp: null,
      articlesList: []
    }
  },
  methods: {
    async onLoad () {
      // console.log(this.timestamp);

      // 首次请求时间戳应该是当前时间戳
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }

      let res = await getArticles({
        channel_id: this.channelList[this.active].id,
        timestamp: this.timestamp
      })
      // 返回的数据中有一个时间戳，是下次发起请求的时间戳
      this.timestamp = res.data.data.pre_timestamp
      // 要把返回的数据push进数组，不然永远只有10条
      this.articlesList.push(...res.data.data.results)

     // 当前这页数据加载完成，需要关闭动画，否则下次不会重新加载
      this.loading = false
      // 控制只请求50次
      if (this.articlesList.length >= 50) {
        this.finished = true
      }
    },
    onRefresh () {
      // console.log(111);
      // 只要下拉刷新，finished一定要改false，否则数据无法加载更多
      this.finished = false
      // 清空数据与时间戳重新加载
      this.timestamp=null
      this.articlesList = []
      // 开启list加载动画
      this.loading = true
      // 主动调用方法，请求数据
      this.onLoad()
      // 数据加载完成，关闭上拉加载动画
      this.isLoading = false
    },
    // 给tab栏的父盒子加点击事件，事件委托
    tabClick () {
      // console.log(this.active);
      // 进新页面，finished改为false
      this.finished = false
      // 清空数据与时间戳，重新加载
      this.timestamp=null
      this.articlesList = []
      // 开启list加载动画
      this.loading = true
      // 主动调用方法，请求数据
      this.onLoad()
    }
  },
  async created () {
    // 用async异步函数，简化代码
    let res = await getChannels()
    // console.log(res);
    this.channelList = res.data.data.channels
  },
  filters:{
    fromNow(value) {
      return moment(value, "YYYYMMDD").fromNow(); 
    }
  }
}
</script>

<style lang="less">
.home-container {
  // 顶部栏
  .van-nav-bar {
    z-index: 10;
    // margin-bottom: 46px;

    .logo {
      width: 100px;
      height: 30px;
      // 在css样式内，路径默认会加上./，要想要正确的路径前面要加上~
      background: url('~@/assets/logo.png') no-repeat;
      background-size: 100%;
    }

    .van-nav-bar__right {
      .van-button {
        width: 100px;
        height: 30px;
        border: none;
        background-color: #1dadfb;

        .van-icon-search {
          color: #fff;
        }
      }
    }
  }

  // tabs栏
  .van-tabs {
    .van-tabs__wrap {
      width: 100%;
      position: fixed;
      top: 46px;
      z-index: 2;
    }

    .van-tabs__content {
      margin-top: 90px;
      margin-bottom: 50px;
    }
  }
}
</style>
